<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <el-card class="follow-card">
        <!--头像-->
        <div class="follow-face">
          <el-avatar :size="50" :src="item.Face | toFaceUrl">
            <el-avatar icon="el-icon-user-solid" :size="50"></el-avatar>
          </el-avatar>
        </div>
        <!--关注按钮-->
        <el-button v-if="isFollowing" class="follow-p-btn" type="primary" size="small" @click="togAtt(item.Uid,index)">已关注</el-button>
        <!--昵称和个签-->
        <span class="follow-name" @click="goAuthorSpace(item.Uid)">{{item.Name}}</span>
        <span class="follow-sign">{{item.Sign}}</span>
      </el-card>
    </div>
  </div>
</template>

<script>
import { toFaceUrl } from "@/utils/url";
import { unsubscribe } from "@/api/relations";
export default {
  props: {
    list: {
      type: Array,
      default: null,
    },
    isFollowing: {
      type: Boolean,
    },
  },
  data() {
    return {
      //isFollow:true,
      formId: {
        id: "",
      },
    };
  },
  methods: {
    goAuthorSpace(id) {
      this.$router.push({ name: "userVideo", params: { uid: id } });
    },
    togAtt(uid, index) {
      this.formId.id = uid;
      this.$confirm("是否取消关注?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        unsubscribe(this.formId)
          .then((res) => {
            if (res.data.code === 200) {
              this.isFollow = false;
              this.$message.success("取消关注");
              this.list.splice(index, 1);
            }
          })
          .catch((err) => {
            this.$message.error(err.response.data.msg);
          });
      });
    },
  },
  filters: {
    toFaceUrl(name) {
      return toFaceUrl(name);
    },
  },
};
</script>

<style>
.follow-card {
  position: relative;
  width: 70%;
  margin: auto;
}

.follow-name {
  position: absolute;
  bottom: 50px;
  left: 100px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.follow-sign {
  position: absolute;
  bottom: 25px;
  left: 100px;
  font-size: 14px;
  color: #2e2e2e;
}

.follow-p-btn {
  position: absolute;
  margin-left: 750px;
  margin-top: -45px;
}
</style>